<script type="text/javascript">
	Ext.onReady(function(){
		var siteStructureActionsUrls  = ['/Bike/controllers/data.php?type=site_structure', '/Bike/controllers/data.php?type=site_tree_content'];
		var contentForm = new Ext.TabPanel({
			activeTab: 0,
			hidden : false,
			width: 500,
			defaults:{autoHeight:true, bodyStyle:'padding:10px'},
			items: [{
				applyTo: 'props-div',
				title: STRUCTURE_TITLE_PROPERTIES,
				xtype: 'form',
				labelWidth: 75,
				border:false,
				defaults: {bodyStyle:'padding:10px'},
				items:[{
						layout:'form',
						defaults: {width: 500},
						defaultType: 'textfield',
						items: [{
							fieldLabel: STRUCTURE_TITLE_LABEL,
							name: 'label',
							allowBlank: false,
							value: '',
							maskRe: /[a-zA-Z\d\-]/
						},{
							fieldLabel: STRUCTURE_TITLE_TITLE,
							name: 'title',
							allowBlank: false,
							value: ''
						},{
							xtype: 'combo',
						   	fieldLabel: STRUCTURE_TITLE_TEMPLATE,
							name: 'template',
							allowBlank: false,
							value: '',
							store: new Ext.data.JsonStore({
								url: '/Bike/controllers/templates.php?type=list',
								fields: ['path', 'name']
								}),
							displayField:'path',
							editable: false,
							triggerAction: 'all',
							emptyText: '',
							selectOnFocus:true
						},{
							fieldLabel: STRUCTURE_TITLE_TAGS,
							name: 'tags',
							allowBlank: true,
							value: ''
						},{
							xtype: 'hidden',
							fieldLabel : 'nodeId',
							id : 'nodeId'
						},{
							xtype: 'hidden',
							fieldLabel : 'parentNodeId',
							id : 'parentNodeId'
						},{
							xtype: 'hidden',
							fieldLabel : 'operation',
							id : 'operation'
						}]
				}]
			},{
				title: STRUCTURE_TITLE_CONTENT,
				xtype: 'form',
				labelWidth: 75,
				border:false,
				defaults: {bodyStyle:'padding:10px'},
				listeners: {
					beforeshow: function(component){
						//TODO: get data and save data handlers
						component.getForm().load({
							url: siteStructureActionsUrls[1],
							success: function(form, action){
								var formData = Ext.decode(action.response.responseText);
								for(var i = 0; i < formData.data.length; ++i){
									var field = component.getForm().findField(formData.data[i].label);
									if(field){
										component.getForm().findField(formData.data[i].label).setValue(formData.data[i].content);
									}
								}
							},
							method: 'POST',
							params: {nodeId: component.getForm().findField('nodeId').getValue()}
						});
					}
				},
				items:[{
						layout:'form',
						defaults: {width: 500},
						defaultType: 'textfield',
						items: [{
							fieldLabel: 'Meta title',
							name: 'metaTitle'
						},{
							fieldLabel: 'Meta description',
							name: 'metaDescription'
						},{
							fieldLabel: 'Meta keywords',
							name: 'metaKeywords'
						},{
							xtype: 'htmleditorfield',
							fieldLabel: STRUCTURE_TITLE_PAGECONTENT,
							name: 'content'
						},{
							xtype: 'hidden',
							fieldLabel: 'nodeId',
							name : 'nodeId',
							id : 'treeNodeId'
						}]
				}]
			}],
			buttons: [{
							text: STRUCTURE_TITLE_SAVE,
							handler: function(button, event){
							   contentForm.saveHandler();
							}
						},{
							text: STRUCTURE_TITLE_CANCEL,
							handler: function (button, event){
								windowForContentForm.hide();
							}
						}]
		});

		contentForm.saveHandler = function(){
			var  submitUrl = '';
			switch (contentForm.getActiveTab()){
				case contentForm.get(1):
					submitUrl = siteStructureActionsUrls[1];
					break;
				default:
					submitUrl = siteStructureActionsUrls[0];
					break;
			}
			contentForm.getActiveTab().getForm().submit({
				url : submitUrl,
				success: function(form, action){
					windowForContentForm.hide();
					var parentNode;
					var operation = contentForm.get(0).getForm().findField('operation').getValue();
					switch (operation){
						case 'update' :
							parentNode = tree.getNodeById(contentForm.get(0).getForm().findField('parentNodeId').getValue());
							break;
						case 'insert':
							parentNode = tree.getNodeById(contentForm.get(0).getForm().findField('parentNodeId').getValue());
							if(parentNode.isLeaf()){
								parentNode = parentNode.parentNode;
							}
							break;
						case 'delete':
							parentNode = tree.getNodeById(contentForm.get(0).getForm().findField('parentNodeId').getValue());
							break;
					}
					parentNode.collapse(false);
					parentNode.loaded = false;
					parentNode.removeAll(false);
					parentNode.expand();
				},
				failure: function(form, action) {
					switch (action.failureType) {
						case Ext.form.Action.CONNECT_FAILURE:
							Ext.Msg.alert('Failure', 'Ajax communication failed');
							break;
						case Ext.form.Action.SERVER_INVALID:
						   Ext.Msg.alert('Failure', action.result.msg);
				   }
				}
			});
		};
		//contentForm.render('props-div');

		var windowForContentForm = new Ext.Window({
			applyTo:'props-window',
			layout:'fit',
			width: 650,
			height:600,
			closeAction:'hide',
			plain: true,
			items: contentForm,
			modal: true,
			hidden: true,
			autoShow: false,
			title: STRUCTURE_TITLE_EDIT,
			stateful: true
		});

		var tree = new Ext.tree.TreePanel({
			useArrows: true,
			autoScroll: true,
			animate: true,
			enableDD: false,
			containerScroll: true,
			border: false,
			// auto create TreeLoader
			dataUrl: siteStructureActionsUrls[0],

			root: {
				nodeType: 'async',
				text: '/',
				draggable: false,
				id: {{ROOT_NODE_ID}}
			},

			contextMenu: new Ext.menu.Menu({
				applyTo: 'context-menu',
				items: [{
					id: 'add-sitetree-node',
					text: STRUCTURE_TITLE_ADDNODE
				},{
					id: 'edit-sitetree-node',
					text: STRUCTURE_TITLE_EDITNODE
				},{
					id: 'delete-sitetree-node',
					text: STRUCTURE_TITLE_DROPNODE
				}],
				listeners: {
					itemclick: function(item) {
						var contextNode = item.parentMenu.contextNode;
						contentForm.get(0).getForm().reset();
						contentForm.get(1).getForm().reset();
						contentForm.setActiveTab(0);
						switch (item.id) {
							case 'add-sitetree-node':
								contentForm.get(0).findById('parentNodeId').setValue(contextNode.id);
								contentForm.get(0).findById('operation').setValue('insert');
								windowForContentForm.show();
								break;
							case 'edit-sitetree-node':
								var fields = contentForm.get(0).findByType('textfield');
								var fieldName = '';
								for(var i = 0; i < fields.length; ++i){
									fieldName = fields[i].getName();
									if('undefined' != typeof(contextNode.attributes[fieldName])){
										fields[i].setValue(contextNode.attributes[fieldName]);
									}
								}
								contentForm.get(0).findById('nodeId').setValue(contextNode.id);
								if(undefined == contextNode.parentNode){
									return false;
								}
								contentForm.get(0).findById('parentNodeId').setValue(contextNode.parentNode.id);
								contentForm.get(0).findById('operation').setValue('update');
								contentForm.get(1).findById('treeNodeId').setValue(contextNode.id);
								windowForContentForm.show();
								break;
							case 'delete-sitetree-node':
								var fields = contentForm.get(0).findByType('textfield');
								var fieldName = '';
								for(var i = 0; i < fields.length; ++i){
									fieldName = fields[i].getName();
									if('undefined' != typeof(contextNode.attributes[fieldName])){
										fields[i].setValue(contextNode.attributes[fieldName]);
									}
								}
								contentForm.get(0).findById('nodeId').setValue(contextNode.id);
								contentForm.get(0).findById('parentNodeId').setValue(contextNode.parentNode.id);
								contentForm.get(0).findById('operation').setValue('delete');
								Ext.MessageBox.confirm(STRUCTURE_TITLE_WARNING,
														STRUCTURE_TITLE_CONFIRMDELETE,
														function(btn){
															if('yes' == btn){
																contentForm.saveHandler();
															}
														});
								break;
						}
					}
				}
			}),

			listeners: {
					contextmenu: function(node, e) {
						node.select();
						var contextNode = node.getOwnerTree().contextMenu;
						contextNode.contextNode = node;
						contextNode.showAt(e.getXY());
					},
					click: function(node, e){
						e.stopEvent();
					},
					dblclick: function(node, e){
						e.stopEvent();
					}
				}

		});
		tree.render('tree-div');
		tree.getRootNode().expand();
	});
</script>

<div id="tree-div"></div>
<div id="props-div"></div>
<div id="props-window"></div>
<div id="context-menu"></div>